---
import DemosLayout from '@components/demos/DemosLayout.astro';
import DemoTabs from '@components/demos/DemosTabs.astro';
import styles from '@pages-styles/example.module.scss';
import { Icon } from '@ag-website-shared/components/icon/Icon';
import { HR } from '@components/demos/examples/hr';
import LogoMark from '@components/logo/LogoMark';
---

<DemosLayout title="Demo - HR Management" description="HR data example showing hierarchical employee data.">
    <div class={styles.topHeader}>
        <div>
            <div class={styles.headerTitle}>
                <h1 class={styles.headerHeading}>HR</h1>
                <a class="button-secondary" href="https://github.com/ag-grid/ag-grid-demos/tree/main/hr">
                    <Icon name="github" svgClasses={styles.githubIcon} />
                    <span>See on GitHub</span>
                </a>
            </div>
            <p>Example showing HR hierarchical employee data.</p>
        </div>

        <DemoTabs activeTab="crm" />
    </div>

    <div class={styles.layout}>
        <div class={styles.layoutWrapper}>
            <div class={styles.loadingLogoContainer}>
                <LogoMark isSpinning />
            </div>
            <HR client:only="react" />
        </div>
    </div>
</DemosLayout>
